/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="openatc-device">
    <div class="devs-container" style="position:relative">
      <div class="devs-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          size="mini"
          :max-height="tableHeight"
          v-loading.body="listLoading"
          style="width: 100%"
          id="footerBtn"
          @selection-change="handleSelectionChange">
          <el-table-column
            v-if="isShowCheckbox"
            type="selection"
            width="45">
          </el-table-column>
          <el-table-column
            type="index"
            label="#"
            align="center">
          </el-table-column>
          <!-- <el-table-column
            prop="id"
            label="ID"
            sortable
            align="center">
          </el-table-column> -->
          <el-table-column
            prop="name"
            :label="$t('openatc.greenwaveoptimize.routename')"
            align="center">
          </el-table-column>
          <!-- <el-table-column
            prop="type"
            :label="$t('openatc.devicemanager.type')"
            sortable
            align="center">
          </el-table-column> -->
          <el-table-column
            prop="optstrategy"
            :label="$t('openatc.greenwaveoptimize.coordinationstrategy')"
            :formatter="formatStrategy"
            sortable
            align="center">
          </el-table-column>
          <el-table-column
            prop="direction"
            :label="$t('openatc.greenwaveoptimize.coordinationdirection')"
            :formatter="formatDirection"
            sortable
            align="center">
          </el-table-column>
          <el-table-column
            prop="keyintsid"
            :label="$t('openatc.greenwaveoptimize.keyintersection')"
            sortable
            align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { GetAllRoute } from '../../api/route'// GetAllDevice,
import { getMessageByCode } from '../../utils/responseMessage'
export default {
  name: 'routeList',
  components: {},
  props: {
    selectedRecords: {
      type: Array,
      default: () => []
    },
    tableHeight: {
      type: Number,
      default: 900
    },
    isShowOperation: {
      type: Boolean,
      default: true
    },
    isShowCheckbox: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      directionOptions: [{
        value: 'up',
        label: this.$t('openatc.greenwaveoptimize.directionOption1'),
        id: '1'
      }, {
        value: 'down',
        label: this.$t('openatc.greenwaveoptimize.directionOption2'),
        id: '2'
      }, {
        value: 'all',
        label: this.$t('openatc.greenwaveoptimize.directionOption3'),
        id: '3'
      }],
      optstrategyOptions: [{
        value: 'green',
        label: this.$t('openatc.greenwaveoptimize.optstrategyoption1'),
        id: '1'
      }, {
        value: 'red',
        label: this.$t('openatc.greenwaveoptimize.optstrategyoption2'),
        id: '2'
      }, {
        value: 'motorcade-end',
        label: this.$t('openatc.greenwaveoptimize.optstrategyoption3'),
        id: '3'
      }, {
        value: 'dynamicGreen',
        label: this.$t('openatc.greenwaveoptimize.optstrategyoption4'),
        id: '4'
      }],
      multipleSelection: [],
      messageboxVisible: false,
      tableData: [],
      listLoading: false // 数据加载等待动画
    }
  },
  mounted: function () {
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.getDeviceRanges()
  },
  methods: {
    toggleSelection (list) {
      let selectIds = list.map(item => item.id)
      let rows = this.tableData.filter(item => selectIds.includes(item.id))
      if (rows) {
        rows.forEach(row => {
          let dom = this.$refs.multipleTable
          dom && dom.toggleRowSelection(row, true)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    formatStrategy (row, column) {
      let res = row.optstrategy
      for (let item of this.optstrategyOptions) {
        if (row.optstrategy === item.value) {
          res = item.label
          break
        }
      }
      return res
    },
    formatDirection (row, column) {
      let res = row.optstrategy
      for (let item of this.directionOptions) {
        if (row.direction === item.value) {
          res = item.label
          break
        }
      }
      return res
    },
    getDeviceRanges () {
      this.listLoading = true
      GetAllRoute().then(res => {
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.listLoading = false
        if (res.data.data) {
          this.tableData = res.data.data
        } else {
          this.tableData = []
        }
        if (this.selectedRecords.length > 0) {
          setTimeout(() => {
            this.toggleSelection(this.selectedRecords)
          }, 1000)
        }
      })
    },
    cancle () {
      this.messageboxVisible = false
    },
    resetMultipleSelection () {
      this.$refs.multipleTable.clearSelection()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.$emit('onSelectionChange', this.multipleSelection)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
